<!--  -->
<template>
  <div>
    <li @mouseenter="isHighLight=true"
        @mouseleave="isHighLight=false"
        :class="{'enter-class':isHighLight}">
      <!--三元运算符写法-->
      <!-- :class="isHighLight?'enter-class':'leave-class'" -->
      <label>
        <!-- checkbox 如果获取的值是true,那么就会打勾
        页面刚展示获取值为true就会打勾,在标签内没有写value的情况下，如果写了value，获取的值要和value值对应才会打勾
        后期自己点击打勾，v-model收集的是value值，没有value值，默认收集也是true或者false
        -->
        <input type="checkbox"
               :checked="todo.done"
               @click="itemChange(index,$event)">
        <!-- @click="itemChange(todo.id,$event)" -->
        <span>{{todo.hobby}}</span>
        <!-- Vue里面如果插值没有使用，在vue的插件里可能不是实时体现变化 -->
        <!-- {{isHighLight}} -->
      </label>
      <button class="btn btn-danger"
              :style="{display:(isHighLight?'block':'none')}"
              @click="deleteItem(index)">删除</button>
      <!-- 绑定样式的三元表达式写法 -->
      <!-- 三元表达式写法 -->
      <!-- :class="isHighLight?'show':'hidden'" -->
    </li>
  </div>
</template>

<script>
export default {
  name: 'Item',
  data () {
    return {
      //1.是否高亮
      isHighLight: false,
    }
  },
  props: ['todo', 'changeTodo', 'deleteTodo', 'index'],
  methods: {
    // 1.通过ID的方式改变多选框的选中状态
    /* itemChange (id, event) {
      // console.log(id, event.target.checked);
      //调用VueComponent的从APP穿过类的changeTodo方法，传ID过去
      this.changeTodo(id, event.target.checked)
    } */

    // 2.通过index下标的方式改变多选框的选中状态，index通过父级组件List传过来
    itemChange (index, event) {
      this.changeTodo(index, event.target.checked)
    },
    // 3.删除Item
    deleteItem (index) {
      if (confirm("你确定要删除吗？")) {
        this.deleteTodo(index)
      }
    }
  }

}
</script>



<style scoped>
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd !important;
}
li label {
  float: left;
  cursor: pointer;
}
li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}
li button {
  float: right;
  /* display: none; */
  margin-top: 3px;
}
li:before {
  content: initial;
}
li:last-child {
  border-bottom: none;
}
.enter-class {
  background-color: #aaa;
}
.leave-class {
  background-color: #fff;
}
.show {
  display: block;
}
.hidden {
  display: none;
}
</style>